<template>
  <PageView :pageData="Page" @operateChange="operateChange"> </PageView>
</template>
<script setup>
import {
  getPermissionList,
  deletePermission,
  editPermission,
  getPermissionTree,
  addPermission,
} from "@/api/permission";

import Tool from "@/utils/tool";
/**
 * 表格操作按钮回调函数
 */
const operateChange = (info, row) => {};

const Page = markRaw({
  addBtn: {
    label: "添加",
    type: "primary",
    icon: "icon iconfont icon-add",
    method: addPermission,
  },
  form: {
    data: [
      {
        type: "Input",
        field: "name",
        label: "权限名称",
        value: "",
        placeholder: "权限名称",
      },
      {
        type: "RangePicker",
        field: "date",
        label: "日 期",
        value: null,
        valueFormat: "YYYY-MM-DD",
        arr2obj: ["startTime", "endTime"],
      },
    ],
  },
  table: {
    columns: [
      {
        title: "权限编码",
        dataIndex: "id",
        key: "id",
      },
      {
        title: "权限名称",
        dataIndex: "name",
        key: "name",
      },
      {
        title: "权限类型",
        dataIndex: "type",
        key: "type",
        render: (row) => {
          return row.type === 1 ? "页面" : "按钮";
        },
      },
      {
        title: "路由地址",
        dataIndex: "path",
        key: "path",
      },
      {
        title: "创建时间",
        dataIndex: "createTime",
        key: "createTime",
      },
      {
        title: "操作",
        width: 120,
        key: "operate",
        btns: [
          {
            label: "编辑",
            class: "el-icon-edit table_edit-btn",
            key: "edit",
            method: editPermission,
          },
          {
            label: "删除",
            class: "el-icon-edit table_edit-btn",
            key: "delete",
            content: "确定要删除吗？",
            method: deletePermission,
          },
        ],
      },
    ],
    data: async (val) => {
      const res = await getPermissionTree(val);
      if ((res.code = rescf.codeVal)) {
        let tree = Tool.arrayToTree(res.data, "-1", "parentId");
         tree = Tool.compare(tree, "sort");
         return {
          code: rescf.codeVal,
          data: tree
         };
      } else {
        return [];
      }
    },
  },
  modal: {
    title: "权限",
    data: [
      {
        type: "TreeSelect",
        field: "parentId",
        label: "所属父级：",
        value: -1,
        placeholder: "所属父级",
        labelWidth: "80px",
        arrPop: true,
        treeDefaultExpandAll: true,
        options: async () => {
          let res = await getPermissionList();
          if ((res.code = rescf.codeVal)) {
            let tree = Tool.arrayToTree(res.data, "-1", "parentId");
            tree = Tool.compare(tree, "sort");
            res.data = [
              {
                id: -1,
                name: "顶级菜单",
              },
            ].concat(tree);
          }
          return res;
        },
        optionsProps: {
          label: "name",
          value: "id",
          children: "children",
        },
        rules: [
          {
            required: true,
            message: "请输入所属父级",
            trigger: "blur",
          },
        ],
      },
      {
        type: "Input",
        field: "name",
        label: "权限名称：",
        value: "",
        placeholder: "权限名称",
        labelWidth: "80px",
        rules: [
          {
            required: true,
            message: "请输入权限名称",
            trigger: "blur",
          },
        ],
      },
      {
        type: "Input",
        field: "path",
        label: "路由路径：",
        value: "",
        placeholder: "路由路径",
        labelWidth: "80px",
        rules: [
          {
            required: true,
            message: "请输入路由路径",
            trigger: "blur",
          },
        ],
      },
      {
        type: "Select",
        field: "type",
        label: "类型：",
        options: [
          {
            label: "页面",
            value: 1,
          },
          {
            label: "按钮",
            value: 2,
          },
        ],
        value: null,
        placeholder: "类型",
        labelWidth: "80px",
        rules: [
          {
            required: true,
            message: "请选择类型",
            trigger: "blur",
          },
        ],
      },
      {
        type: "Input",
        field: "css",
        label: "icon图标：",
        value: "",
        placeholder: "icon图标",
        labelWidth: "80px",
        rules: [
          {
            required: true,
            message: "请输入icon图标",
            trigger: "blur",
          },
        ],
      },
      {
        type: "Input",
        field: "oparate",
        label: "自定义：",
        value: "",
        placeholder: "自定义",
        labelWidth: "80px",
        rules: [
          {
            required: true,
            message: "请输入自定义",
            trigger: "blur",
          },
        ],
      },
      {
        type: "Select",
        field: "hidden",
        label: "显示/隐藏：",
        options: [
          {
            label: "显示",
            value: false,
          },
          {
            label: "隐藏",
            value: true,
          },
        ],
        value: false,
        placeholder: "显示/隐藏",
        labelWidth: "80px",
        rules: [
          {
            required: true,
            message: "请选择显示/隐藏",
            trigger: "blur",
          },
        ],
      },
      {
        type: "Input",
        field: "sort",
        label: "排序：",
        value: "",
        placeholder: "排序",
        labelWidth: "80px",
      },
    ],
  },
});
</script>
